import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Block, Image, View} from '@tarojs/components'
import './list.scss'
import {http} from '../../utils/http'
import {
  GET_TOGETHER_LIST, RESOURCE_URL
} from '../../constants/api'
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {vcmonitor} from "../../utils/tools";

export default class CheckTicket extends Component {
  state: {
    list: [] | false;
    searchKey: string;
    loadMoreStatus: "more" | "loading" | "noMore";
  } = {
    list: false,
    searchKey: '',
    loadMoreStatus: 'loading'
  }
  page = 1
  limite = 20

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    if (process.env.TARO_ENV === "weapp") {
      Taro.hideShareMenu()
    }
  }

  async componentDidShow() {
    vcmonitor(this)
    const list = (await this.getList(1)) || false
    this.setState({list})
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: "loading"})
      const old = this.state.list
      const list = (await this.getList(++this.page)) || []
      this.setState({list: [...old, ...list]})
    }
  }

  async getList(page = 1) {
    const list = await http.get(GET_TOGETHER_LIST, {page: page, length: this.limite})
    if (list) {
      if (list.length < this.limite) {
        this.setState({loadMoreStatus: 'noMore'})
      } else {
        this.setState({loadMoreStatus: 'more'})
      }
      return list.list
    } else {
      return []
    }
  }

  goPage(id, date, good_Id) {
    Taro.navigateTo({
      url: '/common/tourist-line/accompany?itemId=' + id + '&buyDate=' + date + '&good_Id=' + good_Id
    })
  }

  render() {
    const {list} = this.state
    return (
      <View className="tourist-list-root">
        <GzhAuth/>
        {list && list.length > 0 && <View>
          {list.map((item, index) =>
            <View onClick={this.goPage.bind(this, item.tours_line_uuid, item.buy_date, item.goods_id)} key={index}
                  className="item">
              <View className={'img'}>
                <Image src={item.url} mode={"widthFix"}/>
              </View>
              <View className={'info-line'}>
                <View className={'title'}>{item.product_name}</View>
                <View className={'date-box'}>
                  <View className={'date'}>出发日期:{item.buy_date}</View>
                  {item.is_surplus_stock !== 1 && <View className={'surplus'}>已报满</View>}
                </View>
                <View className={'headImgs'}>
                  <View>约伴行</View>
                  {item.orderUserList.map((item, i) => <Block>
                    {i < 6 && <View className={'head'} key={i}>
                      <Image src={item.photo}/>
                    </View>}
                  </Block>)}
                </View>
              </View>
            </View>)}
        </View>}
        {list.length == 0 && this.page == 1 && <View className="listNull">
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode={"widthFix"}/>
          <View className='text'>什么都没有,去看看别的吧~</View>
        </View>}
      </View>
    )
  }
}
